<template>
    <div class="divBox">
      <el-card class="box-card">
        <el-form ref="elForm" :model="ruleForm" :rules="rules" label-width="150px">
            <el-form-item label="规则名称" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入规则名称"></el-input>
            </el-form-item>
            <el-form-item label="选择商家：" prop="shopId">
            <el-select v-model="ruleForm.shopId" placeholder="请选择">
                <el-option
                    v-for="item in shopList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
                </el-select>
            </el-form-item>
            <el-form-item label="充值金额" prop="price">
            <el-input v-model="ruleForm.price" placeholder="请输入充值金额"></el-input>
            </el-form-item>
            <el-form-item label="赠送金额" prop="giveMoney">
            <el-input v-model="ruleForm.giveMoney" placeholder="请输入赠送金额"></el-input>
            </el-form-item>
            <el-form-item label="优惠券">
                <el-table
                    :data="addCouponArr"
                    size="mini"
                    class="table"
                    highlight-current-row
                    :header-cell-style=" {fontWeight:'bold'}">
                    <el-table-column prop="id" label="ID" min-width="50" />
                    <el-table-column prop="name" label="名称" min-width="180" />
                    <el-table-column prop="name" label="生效时间" min-width="180" />
                    <el-table-column prop="name" label="失效时间" min-width="180" />
                    <el-table-column
                        label="数量"
                        min-width="150"
                        >
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.num"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button type="primary" size="mini" @click="showCoupon">新增</el-button>
            </el-form-item>
            <el-button type="primary" size="mini" @click="submit">提交</el-button>
        </el-form>
     </el-card>
     <el-dialog v-model="dialogFormVisible" title="请选择优惠券" append-to-body :visible.sync="dialogFormVisible" width="1200px" @close="dialogFormVisible = false">
        <el-table
            :row-style="{height:'50px'}"
            :data="couponList"
            max-height="400px"
            size="mini"
            @selection-change="handleSelectionChange"
            style="width: 100%;">
            <el-table-column type="selection" width="100">
                </el-table-column>
            <el-table-column
                prop="id"
                label="ID"
                sortable
                width="80">
            </el-table-column>
            <el-table-column
                prop="name"
                label="名称"
                min-Width="120">
            </el-table-column>
            <el-table-column
                prop="lastTotal"
                label="库存"
                min-Width="120">
            </el-table-column>
            </el-table>
            <div slot="footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="handelConfirm">
          确定
        </el-button>
      </div>
        </el-dialog>
    </div>
</template>
<script>
import { addRule, updateRule } from '@/api/chongzhi'
import { marketingListApi  } from '@/api/marketing'
import { shopListApi } from '@/api/shopPoint';
export default {
    name: 'ChuzhiProp',
    data() {
        return {
            ruleForm: {
                shopId: null,
                price: null,
                name: null,
                giveMoney: null,

            },
            rules: {
                name: [
                    { required: true, message: '请输入规则名称', trigger: 'blur' }
                ],
                shopId: [
                    { required: true, message: '请选择选择商家', trigger: 'change' }
                ],
                price: [
                    { required: true, message: '请输入充值金额', trigger: 'blur' }
                ],
                giveMoney: [
                    { required: true, message: '请输入赠送金额', trigger: 'blur' }
                ],
            },
            multipleSelection: [],
            couponList: [],
            addList: [],
            params: {
                page: 1,
                limit: 10,
                status: 1,
                type: 3,
            },
            shopList: [],
            dialogFormVisible: false,
            couponLoading: false, // 弹窗表格
            selectCouponArr: [],
            addCouponArr: []
        }
    },
    async created() {
        this.getShopList()
    },
    methods: {
        submit() {
            this.$refs.elForm.validate(valid => {
                if (!valid) return
                let coupon
                if (this.addCouponArr.length > 0) {
                    coupon = this.addCouponArr.map(item => {
                        return {
                            couponId: item.id,
                            number: item.num
                        }
                    })
                }
                console.log(coupon)
                addRule({
                    coupon,
                    ...this.ruleForm
                }).then(res => {
                    console.log(res)
                })
            })
        },
        handelConfirm() {
            if(this.selectCouponArr.length == 0) {
                return this.$message.error('请选择优惠券')
            }
            this.addCouponArr = this.selectCouponArr.map(item => {
                return {
                    num: 1,
                    ...item
                }
            })
            this.selectCouponArr = []
            this.dialogFormVisible = false
        },
        handleSelectionChange(val) {
            console.log(val)
            this.selectCouponArr = val;
        },
        async showCoupon() {
            if (!this.ruleForm.shopId) {
                return this.$message.error('请先选择商家')
            }
            const res = await marketingListApi({
                shopId: this.ruleForm.shopId,
                ...this.params
            })
            if (res.list.length > 0) {
                this.couponList = res.list
                this.dialogFormVisible = true
            } else {
                this.$message.error('请先添加赠送优惠券')
            }
        },
        async getShopList() {
            shopListApi ({
                page: 1,
                limit: 100,
                status: 1,
                temp: new Date().getTime()
            }).then(res=>{
                this.shopList = res.list;
            })
      }
    },
    
}
</script>

<style lang="scss" scoped>
.discountCoupon {
    display: flex;

}

.el-table__header-wrapper {
    background-color: #ccc !important;
}

.addDiscountCoupon {
    display: flex;
    font-size: 15px;
    color: rgb(88, 99, 222);
    padding-left: 120px;
    margin-top: 20px;

}

.newCoupon {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(#000, 0.3);
    padding-top: 80px;
    padding-bottom: 20px;
    z-index: 9999;

    .discountCouponList {
        margin-top: 20px;
        padding-top: 20px;
        background-color: #fff;
        width: 70%;
        height: 100%;
        margin: 0 auto;
        padding-bottom: 20px;
        margin-top: 50px;

        .selectDiscountCoupon {
            display: flex;
            padding-left: 20px;
            margin-bottom: 20px;

        }
    }
}
</style>